---
title: Styling
description: A guide to styling components with our color system.
---

## Overview

This UI library is optimized to work with specific color tokens that provide crisp, contrasted borders and enhanced visual depth. Our styling system builds upon [shadcn/ui's CSS variables approach](https://ui.shadcn.com/docs/theming) to ensure consistency and maintainability.

Our components use opaque borders instead of solid ones to ensure crisp, contrasted borders even when backgrounds lack sufficient contrast. These opaque borders mix with bottom shadows to create enhanced contrast and visual depth.

While this color system is optional, it's designed to provide optimal visual results. Using conventional color tokens may result in inconsistent borders and shadows that don't achieve the intended design quality.

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/colors-zinc
```

This command will override your existing color variables. We're currently providing a default configuration based on zinc colors, but we plan to add more color variants in the future to give you more styling options while maintaining the same optimization principles.

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>
  Copy and paste the following CSS variables into your `globals.css` file:
</Step>

```css title="app/globals.css"
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

:root {
  --radius: 0.625rem;
  --background: var(--color-white);
  --foreground: var(--color-zinc-900);
  --card: var(--color-white);
  --card-foreground: var(--color-zinc-900);
  --popover: var(--color-white);
  --popover-foreground: var(--color-zinc-900);
  --primary: var(--color-zinc-800);
  --primary-foreground: var(--color-zinc-50);
  --secondary: --alpha(var(--color-black) / 4%);
  --secondary-foreground: var(--color-zinc-900);
  --muted: --alpha(var(--color-black) / 4%);
  --muted-foreground: var(--color-zinc-600);
  --accent: --alpha(var(--color-black) / 4%);
  --accent-foreground: var(--color-zinc-900);
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
  --border: --alpha(var(--color-black) / 12%);
  --input: --alpha(var(--color-black) / 12%);
  --ring: var(--color-zinc-400);
}

.dark {
  --background: var(--color-zinc-950);
  --foreground: var(--color-zinc-100);
  --card: color-mix(
    in srgb,
    var(--color-zinc-900) 80%,
    var(--color-zinc-950)
  );
  --card-foreground: var(--color-zinc-100);
  --popover: var(--color-zinc-900);
  --popover-foreground: var(--color-zinc-100);
  --primary: var(--color-zinc-100);
  --primary-foreground: var(--color-zinc-900);
  --secondary: --alpha(var(--color-white) / 6%);
  --secondary-foreground: var(--color-zinc-100);
  --muted: --alpha(var(--color-white) / 6%);
  --muted-foreground: var(--color-zinc-400);
  --accent: --alpha(var(--color-white) / 6%);
  --accent-foreground: var(--color-zinc-100);
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
  --border: --alpha(var(--color-white) / 12%);
  --input: --alpha(var(--color-white) / 12%);
  --ring: var(--color-zinc-500);
}
```

</Steps>

</TabsPanel>

</CodeTabs>

## Extended Color Variables

We've introduced additional color variables beyond the standard shadcn/ui palette to provide more control for specific components like badges and alerts:

- `--destructive-foreground`: Foreground color for destructive actions
- `--info`: Information state color
- `--info-foreground`: Foreground color for information states
- `--success`: Success state color
- `--success-foreground`: Foreground color for success states
- `--warning`: Warning state color
- `--warning-foreground`: Foreground color for warning states

These additional variables ensure consistent styling across components that need to communicate different states or levels of importance.
